<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="basePath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../plugins/jquery.1.12.4.min.js"></script>
    <link rel="stylesheet" href="../../plugins/bootstrap-3.3.0/css/bootstrap.min.css">
    <script src="../../plugins/bootstrap-3.3.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../../plugins/bootstrap-table-1.11.0/bootstrap-table.min.css">
    <script src="../../plugins/bootstrap-table-1.11.0/bootstrap-table.min.js"></script>
    <link href="../../plugins/waves-0.7.5/waves.min.css" rel="stylesheet"/>
    <script src="../../plugins/waves-0.7.5/waves.min.js"></script>
    <script src="../../plugins/bootstrap-table-1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>
    <link rel="stylesheet" href="../../plugins/jquery-confirm/jquery-confirm.min.css">
    <script src="../../plugins/jquery-confirm/jquery-confirm.min.js"></script>
    <link rel="stylesheet" href="../../css/metroStyle/metroStyle.css" type="text/css">
    <script type="text/javascript" src="../../js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="../../js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="../../js/jquery.ztree.exedit.js"></script>

    <script src="../../js/common.js"></script>
    <style>
        #main{padding:1% 2% 2%;background-color:#f5f5f5;}
        .form-group{padding: 10px 20px 0 20px}
    </style>
</head>
<body>
<div id="main" >
    <div id="toolbar" class="btn-group">
        <%--<shiro:hasPermission name="role:create"><button id="btn_add" type="button" class="btn btn-default" data-toggle="modal" data-target="#addModal1" >--%>
            <%--<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增权限--%>
        <%--</button></shiro:hasPermission>--%>
        <%--<shiro:hasPermission name="role:update">--%>
            <%--<button id="btn_edit" type="button" class="btn btn-default" onclick="updateAction()" >--%>
            <%--<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑权限--%>
            <%--</button>--%>
        <%--</shiro:hasPermission>--%>
        <shiro:hasPermission name="comment:delete">
            <button id="btn_delete" type="button" class="btn btn-default" onclick="deleteAction()">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除评论
            </button>
        </shiro:hasPermission>
    </div>
    <%--<!-- 新增模态框（Modal）-->--%>
    <%--<div class="modal fade" id="addModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">--%>
        <%--<div class="modal-dialog">--%>
            <%--<div class="modal-content">--%>
                <%--<div class="modal-header">--%>
                    <%--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">--%>
                        <%--&times;--%>
                    <%--</button>--%>
                    <%--<h4 class="modal-title" >--%>
                        <%--<strong>新增权限</strong>--%>
                    <%--</h4>--%>
                <%--</div>--%>
                    <%--<div class="form-group" >--%>
                        <%--<label for="addName">名称</label>--%>
                        <%--<input id="addName" type="text" class="form-control" name="addName" maxlength="20">--%>
                    <%--</div>--%>
                    <%--<div class="form-group">--%>
                        <%--<label for="addType">类型</label>--%>
                        <%--<input id="addType" type="text" class="form-control" name="addType" maxlength="20">--%>
                    <%--</div>--%>
                    <%--<div class="form-group">--%>
                        <%--<label for="addUrl">地址</label>--%>
                        <%--<input id="addUrl" type="text" class="form-control" name="addUrl" maxlength="300">--%>
                    <%--</div>--%>
                    <%--<div class="form-group">--%>
                        <%--<label for="addPermission">资源</label>--%>
                        <%--<input id="addPermission" type="text" class="form-control" name="addPermission" maxlength="300">--%>
                    <%--</div>--%>
                <%--<div class="modal-footer">--%>
                    <%--<button type="button" class="btn btn-default" data-dismiss="modal">关闭--%>
                    <%--</button>--%>
                    <%--<button id="createPermission" type="button" class="btn btn-primary">--%>
                        <%--确定新增--%>
                    <%--</button>--%>
                <%--</div>--%>
            <%--</div><!-- /.modal-content -->--%>
        <%--</div><!-- /.modal -->--%>
    <%--</div>--%>
    <%--<!-- 编辑模态框（Modal）-->--%>
    <%--<div class="modal fade" id="updateModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">--%>
        <%--<div class="modal-dialog">--%>
            <%--<div class="modal-content">--%>
                <%--<div class="modal-header">--%>
                    <%--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">--%>
                        <%--&times;--%>
                    <%--</button>--%>
                    <%--<h4 class="modal-title" >--%>
                        <%--<strong>编辑用户</strong>--%>
                    <%--</h4>--%>
                <%--</div>--%>
                <%--<div class="modal-body">--%>
                    <%--<label id="updateId" value="" style="display:none"></label>--%>
                    <%--<div class="form-group" >--%>
                        <%--<label for="updateName">名称</label>--%>
                        <%--<input id="updateName" type="text" class="form-control" name="updateName" maxlength="20" value="">--%>
                    <%--</div>--%>
                    <%--<div class="form-group">--%>
                        <%--<label for="updateType">类型</label>--%>
                        <%--<input id="updateType" type="text" class="form-control" name="updateType" maxlength="20" value="">--%>
                    <%--</div>--%>
                    <%--<div class="form-group">--%>
                        <%--<label for="updateUrl">地址</label>--%>
                        <%--<input id="updateUrl" type="text" class="form-control" name="updateUrl" maxlength="300" value="">--%>
                    <%--</div>--%>
                    <%--<div class="form-group">--%>
                        <%--<label for="updatePermission">资源</label>--%>
                        <%--<input id="updatePermission" type="text" class="form-control" name="updatePermission" maxlength="300" value="">--%>
                    <%--</div>--%>
                <%--</div>--%>
                <%--<div class="modal-footer">--%>
                    <%--<button type="button" class="btn btn-default" data-dismiss="modal">关闭--%>
                    <%--</button>--%>
                    <%--<button id="updatePermissionBtn" type="button" class="btn btn-primary">--%>
                        <%--提交更改--%>
                    <%--</button>--%>
                <%--</div>--%>
            <%--</div><!-- /.modal-content -->--%>
        <%--</div><!-- /.modal -->--%>
    <%--</div>--%>

    <table id="table" style="font-size: 14px;"></table>
</div>

<script>
    $('#table').bootstrapTable({
        url: '${basePath}/comment/list',
        height:getHeight(),
        striped: true, // 是否显示行间隔色
        search: true,
        showRefresh: true,
        showColumns: true,
        minimumCountColumns: 2,
        clickToSelect: true,
        // detailView: true,
        paginationLoop: false,
        sidePagination: 'server',
        silentSort: false,
        smartDisplay: false,
        escape: true,
        searchOnEnterKey: true,
        detailFormatter: 'detailFormatter',
        toolbar: "#toolbar",
        uniqueId: "id",
        pageSize: "10",
        pagination: true, // 是否分页
        sortable: true, // 是否启用排序
        cardView: false,                    //是否显示详细视图
        detailView: false,                   //是否显示父子表
        columns: [
            {field: 'ck', checkbox: true,width:70},
            {field: 'id',title: '编号',align:'center'},
            {field: 'sid',title: '被评论的文章',align:'center'},
            {field: 'user_id',title: '评论人的id',align: 'center'},
            {field: 'pid',title: '父级评论的id',align: 'center'},
            {field: 'qq',title: '评论人qq',align: 'center'},
            {field: 'nickname',title: '评论人昵称',align: 'center'},
            {field: 'avatar', title: '评论人的头像地址',align:'center'},
            {field: 'email',title: '评论人的邮箱地址',align:'center'},
            {field: 'status',title: '评论的状态',align: 'center'},
            {field: 'ip',title: '评论时的ip',align: 'center'},
            {field: 'content',title: '评论的内容',align: 'center'},
            {field: 'remark',title: '备注',align: 'center'},
            {field: 'support',title: '支持',align: 'center'},
            {field: 'oppose',title: '反对',align: 'center'},
            {field: 'operation',title: '操作',width:200,align: 'center',valign: 'middle',formatter: actionFormatter, clickToSelect: false},
        ]
    });
    //操作栏的格式化
    function actionFormatter(value, row, index) {
        return [
            // '<a href="javascript:;" onclick="updateAction()" data-toggle="tooltip" title="Edit" class="btn btn-xs btn-primary btn-update" style="background-color: grey;"><i class="glyphicon glyphicon-edit"></i>编辑</a>',
            '&nbsp; <a href="javascript:;" onclick="deleteAction()" data-toggle="tooltip" title="Remove" class="btn btn-xs btn-danger btn-remove"  style="background-color: black;"><i class="glyphicon glyphicon-remove"></i>删除</a>'
            // '<a class="update" href="javascript:;" onclick="updateAction()" data-toggle="tooltip" title="Edit"><i class="glyphicon glyphicon-edit"></i></a>　',
            // '<a class="delete" href="javascript:;" onclick="deleteAction()" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a>'
        ].join('');
    }

<%--//新增--%>
<%--$(function () {--%>
    <%--$("#createPermission").click(function () {--%>
        <%--var addName = $("#addName").val();--%>
        <%--var addType = $("#addType").val();--%>
        <%--var addUrl = $("#addUrl").val();--%>
        <%--var addPermission = $("#addPermission").val();--%>

        <%--var role = {name:addName,type:addType,url:addUrl,permission:addPermission}--%>
        <%--$.ajax({--%>
            <%--url:'${basePath}/permission/create',--%>
            <%--type:"post",--%>
            <%--dataType:'json',--%>
            <%--data:role,--%>
            <%--success:function (result) {--%>
                <%--if (result.result == "success"){--%>
                    <%--$('#addModal1').modal('hide');--%>
                    <%--$("#table").bootstrapTable('refresh');--%>
                <%--}else{--%>
                    <%--alert("fail");--%>
                <%--}--%>
            <%--}--%>
        <%--})--%>
    <%--})--%>
<%--})--%>

<%--// 编辑--%>
<%--function updateAction() {--%>
    <%--var rows = $('#table').bootstrapTable('getSelections');--%>
    <%--if (rows.length != 1) {--%>
        <%--$.confirm({--%>
            <%--type: 'blue',--%>
            <%--title: false,--%>
            <%--content: '请选择一条记录！',--%>
            <%--autoClose: 'cancel|3000',--%>
            <%--backgroundDismiss: true,--%>
            <%--buttons: {--%>
                <%--cancel: {--%>
                    <%--text: '取消',--%>
                    <%--btnClass: 'waves-effect waves-button'--%>
                <%--}--%>
            <%--}--%>
        <%--});--%>
    <%--} else {--%>
        <%--// alert(rows[0].ck+rows[0].id+rows[0].name+rows[0].title+rows[0].description+rows[0].available+rows[0].operation);--%>
        <%--$("#updateName").attr("value",rows[0].name);--%>
        <%--$("#updateType").attr("value",rows[0].type);--%>
        <%--$("#updateUrl").attr("value",rows[0].url);--%>
        <%--$("#updatePermission").attr("value",rows[0].permission);--%>
        <%--$('#updateModal1').modal('show');--%>

        <%--$("#updatePermissionBtn").click(function () {--%>
            <%--var updateId = rows[0].id;--%>
            <%--var updateName = $("#updateName").val();--%>
            <%--var updateType = $("#updateType").val();--%>
            <%--var updateUrl = $("#updateUrl").val();--%>
            <%--var updatePermission = $("#updatePermission").val();--%>
            <%--var role = {id:updateId,name:updateName,type:updateType,url:updateUrl,permission:updatePermission}--%>
            <%--$.ajax({--%>
                <%--url:'${basePath}/permission/update',--%>
                <%--type:"post",--%>
                <%--dataType:'json',--%>
                <%--data:role,--%>
                <%--success:function (result) {--%>
                    <%--if (result.result == "success"){--%>
                        <%--$('#updateModal1').modal('hide');--%>
                        <%--$("#table").bootstrapTable('refresh');--%>
                    <%--}else{--%>
                        <%--alert("fail");--%>
                    <%--}--%>
                <%--}--%>
            <%--})--%>
        <%--})--%>
    <%--}--%>
<%--}--%>

// 删除
var deleteDialog;
function deleteAction() {
    var rows = $('#table').bootstrapTable('getSelections');
    if (rows.length == 0) {
        $.confirm({
            type: 'blue',
            title: false,
            content: '请至少选择一条记录！',
            autoClose: 'cancel|3000',
            backgroundDismiss: true,
            buttons: {
                cancel: {
                    text: '取消',
                    btnClass: 'waves-effect waves-button'
                }
            }
        });
    } else {
        deleteDialog = $.confirm({
            type: 'red',
            animationSpeed: 300,
            title: false,
            content: '确认删除该角色吗？',
            buttons: {
                confirm: {
                    text: '确认',
                    btnClass: 'waves-effect waves-button',
                    action: function () {
                        var ids = new Array();
                        for (var i in rows) {
                            ids.push(rows[i].id);
                        }
                        $.ajax({
                            type: 'get',
                            url: '${basePath}/permission/delete/' + ids,
                            success: function(result) {
                                if (result.result != 'success') {
                                        $.confirm({
                                            theme: 'dark',
                                            animation: 'rotateX',
                                            closeAnimation: 'rotateX',
                                            title: false,
                                            content: '删除失败',
                                            buttons: {
                                                confirm: {
                                                    text: '确认',
                                                    btnClass: 'waves-effect waves-button waves-light'
                                                }
                                            }
                                        });
                                } else {
                                    $.confirm({
                                        theme: 'dark',
                                        animation: 'rotateX',
                                        closeAnimation: 'rotateX',
                                        title: false,
                                        content: '删除成功',
                                        buttons: {
                                            confirm: {
                                                text: '确认',
                                                btnClass: 'waves-effect waves-button waves-light'
                                            }
                                        }
                                    });
                                    $('#table').bootstrapTable('refresh');
                                }
                            },
                            error: function(XMLHttpRequest, textStatus, errorThrown) {
                                $.confirm({
                                    theme: 'dark',
                                    animation: 'rotateX',
                                    closeAnimation: 'rotateX',
                                    title: false,
                                    content: textStatus,
                                    buttons: {
                                        confirm: {
                                            text: '确认',
                                            btnClass: 'waves-effect waves-button waves-light'
                                        }
                                    }
                                });
                            }
                        });
                    }
                },
                cancel: {
                    text: '取消',
                    btnClass: 'waves-effect waves-button'
                }
            }
        });
    }
}
</script>
</body>

</html>